<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" />
    <title>谈话页面</title>
    <script>
    CGWL_ROOT_URL = "{$baseroot?$baseroot:''}";
    </script>
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/jquery/jquery.cookie.js"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/push/pusher.min.js"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/jquery/jquery.form.min.js"/}
    {load href="__libs__/vue/vue.js"/}
    <script type="text/javascript" src="__libs__/webrtc/recorder.js"></script>
    <style>
        * {
            -webkit-overflow-scrolling: touch;
        }

        html, body, button, input, textarea, pre {
            font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif
        }
        
        .foot_msg {
            width: 100%;
            height: 100%;
            overflow: auto;
            position: relative;
        }

        .msg-toolbar {
            padding: 0 5%;
            height: 44px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            background-color: #f7f7f7;
            display: flex;
        }

        .msg-toolbar a {
            flex-grow:  1;
            text-align: center;
        }

        .msg-toolbar a img {
            margin-top: 10.5px;
            height: 23px;
            width: 23px;
        }

        .input-but {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;

        }

        .my-circle {
            border-radius: 10px;
        }

        .fileinput {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0px;
            right: 0px;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }

        .edit-ipt {
            border: 2px solid #ddd;
            width: 78%;
            outline: none;
            text-indent: 10px;
            border-radius: 6px;
            /*margin-left: 2px;*/
            background-color: #fff;
            padding-top: 6px;
            font-weight: normal;
            font-size: 16px;
            overflow-y: auto;
            height: auto;
            min-height: 32px;
            overflow-x: hidden;
            word-break: break-all;
            font-style: normal;
        }

        .outer-right {
            float: right;
            width: 80%;
            position: relative;
            right: 16%;
            clear: both;
            font-size: 14px;
        }

        .outer-left {
            float: right;
            width: 80%;
            position: relative;
            clear: both;
            right: 5%;
            font-size: 14px;
        }

        .outer-iframe-left {
            float: left;
            position: relative;
            clear: both;
            padding-top: 5px;
        }

        .service {
            background-color: #dddddd;
            display: inline-block;
            padding: 12px;
            float: right;
            word-break: break-all;
            word-wrap: break-word;
            color: #555555;
            border-radius: 8px;
            border-top-right-radius: 0;
            max-width: 80%;
            box-sizing: border-box;
        }

        .customer {
            background-color: #fff;
            display: inline-block;
            margin-left: 10px;
            padding: 12px;
            float: left;
            word-break: break-all;
            word-wrap: break-word;
            color: #555555;
            border-radius: 8px;
            border-top-left-radius: 0;
            position: relative;
            left: 0px;
            max-width: 80%;
            border: 1px solid #dddddd;
        }

        .chatmsg {
            margin-bottom: 20px;
            position: relative;
            height: 250px;
        }

        .chatmsg_notice {
            position: relative;
        }

        .chatmsg img {
            max-width: 100%;
            max-height: 100px;
            cursor: pointer;
        }

        .wolive_img img {
            width: 100%;
            max-height: none;
        }

        .chatmsg:after, .chatmsg p {
            content: "";
            display: table;
            width: 100%;
            clear: both;
        }

        .wolive_price {
            color: red;
            margin: 10px 0;
        }

        .service-name {
            float: left;
            display: block;
            position: relative;
            font-size: 12px;
            color: #8D8D8D;
        }

        .showtime {
            color: #D2D2D2;
            position: relative;
            margin-bottom: 10px;
            font-size: 12px;
            text-align: center;
            height: 15px;
            padding-top: 10px;
        }

        .content {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            overflow-y: auto;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .newmsg {
            position: absolute;
            left: 33px;
            top: 13px;
            display: inline-block;
            line-height: 18px;
            color: #0C0C0C;
            text-align: center;
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: #ddd;
        }

        .hide {
            display: none;
        }

        .tool_box {
            width: 100%;
            height: auto;
            position: absolute;
            bottom: 94px;
            display: none;
            background-color: #fff;
        }

        .wl_faces_main ul {
            margin: 5px 5px;
            overflow: hidden;
            width: 100%;
        }

        .wl_faces_main ul li {
            float: left;
            height: 30px;
            width: 26px;
            text-align: center;

        }

        .wl_faces_main ul li img {
            width: 22px;
            height: 22px;
            padding: 0px;
        }
        
        .chatmsg .my-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        #text_all {
            width: 100%;
            padding-right: 20%;
            height: 50px;
            float: left;
            border: 0;
            padding-left: 12px;
            color: #555555;
            font-size: 16px;
        }

        #text_all+.send-btn {
            position: absolute;
            right:12px;
            top:9px;
            width:60px;
            height: 32px;
            line-height: 32px;
            border-radius: 16px;
            padding: 0;
            text-align: center;
        }
        .wolive_product {
            display: block;
            height: 100%;
            position: relative;
            min-width: 170px;
        }
        .wolive_img {
            width: 100%;
        }
        .wolive_head {
            padding-top: 10px;
        }

        .bg {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.3)
        }

        .group {
            width: 300px;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -60%);
            margin: auto;
            background-color: #fff;
            border-radius: 5px;
        }

        .group-title {
            line-height: 50px;
            height: 50px;
            text-align: center;
            font-weight: bold;
        }

        .group-list {
            margin-bottom: 5px;
        }

        .group-item {
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            border-top: 1px solid #DDDDDD;
        }

        .group-item:first-of-type {
            border-top: 0;
        }

        .group-btn {
            width: 300px;
            height: 45px;
            position: relative;
        }

        .group-cancel,.group-submit {
            width: 150px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 14px;
            position: absolute;
            bottom: 0;
        }

        .group-cancel {
            color: #555555;
            background-color: #F5F5F5;
            border-bottom-left-radius: 5px;
            left: 0;
        }

        .group-submit {
            background-color: #2E9FFF;
            color: #fff;
            border-bottom-right-radius: 5px;
            right: 0;
        }

        .group-item input[type='checkbox'] {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 2px;
            background-color: #fff;
            background: url("__image__/mobile/select.png") no-repeat center;
            background-size: 16px 16px;
            font-size: 12px;
            display: inline-block;
            position: relative;
            top: 4px;
            -webkit-appearance:none;
            outline: none;
        }

        .group-item input[type=checkbox]:checked{
            background: url("__image__/mobile/select-active.png") no-repeat center;
            background-size: 16px 16px;
        }

        .group-num {
            color: #999999;
            margin-left: 5px;
        }

        .group-name {
            margin-left: 5px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .user-name {
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .push-evaluation {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 15px;
            background-color: #F5FAFF;
            color: #50ACFF;
            margin: 0 auto 15px;
        }
    </style>
    <script>
        var config = {
            'app_key': '{$app_key}',
            'web_host': '{$whost}',
            'web_port': '{$wport}',
            'value': '{$value}',
            'business_id': '{$user["business_id"]}',
            'service_id': '{$user["service_id"]}',
            'voice_state': '{$voice}',
            'voice_address': '{$voice_address}'
        };

        var pic = '{$avatar}';
        var imghead = '{$img}';
        var num = 0;
        //标记已看消息
        function getwatch(cha) {
            $.ajax({
                url:CGWL_ROOT_URL+"/admin/set/getwatch",
                type: "post",
                data: {visiter_id: cha}
            });
        }

        // new pusher 链接websocket
        var wolive_connect = function () {
            if (config.value == 'true') {
                var pusher = new Pusher(config.app_key, {
                    encrypted: true
                    , enabledTransports: ['wss']
                    , wsHost: config.web_host
                    , wssPort: config.web_port
                    , authEndpoint: '/auth.php'
                    , disableStats: true
                });
            } else {
                var pusher = new Pusher(config.app_key, {
                    encrypted: false
                    , enabledTransports: ['ws']
                    , wsHost: config.web_host
                    , wsPort: config.web_port
                    , authEndpoint: '/auth.php'
                    , disableStats: true
                });
            }

            var value = "{$user['service_id']}";
            var channel = pusher.subscribe("kefu" + value);
            // 发送一个推送
            channel.bind("callbackpusher",function(data){
                $.post("{:url('admin/set/callback','',true,true)}",data,function(res){

                })
            });
//接收消息
            channel.bind("cu-event", function (data) {
                if("{$voice}" == 'open'){
                    document.getElementById("chat-message-audio").play();
                }
                var showtime = '';
                if (data.message.visiter_id == "{$data['visiter_id']}") {
                    var msg = '';
                    msg += '<li class="chatmsg"><div class="showtime">' + showtime + '</div><div style="position: absolute;left:12px;">';
                    msg += '<img class="my-circle  se_pic" src="' + pic + '" width="40px" height="40px"></div>';
                    msg += "<div class='outer-left'><div class='customer'>";
                    msg += "<pre>" + data.message.content + "</pre>";
                    msg += "</div></div>";
                    msg += "</li>";
                    $('.conversation').append(msg);
                    getwatch(data.message.visiter_id);
                } else {
                    num++;
                    if (num > 0) {
                        $(".newmsg").removeClass('hide');
                    } else {
                        $(".newmsg").addClass('hide');
                    }
                    $(".newmsg").text(num);
                }
                var div = document.getElementById("wrap");
                div.scrollTop = div.scrollHeight;
                
                $("img[src*='upload/images']").parent().parent('.customer').css({
                    padding: '0',borderRadius: '0',maxHeight:'100px'
                });
                $("img[src*='upload/images']").parent().parent('.service').css({
                    padding: '0',borderRadius: '0',maxHeight:'100px'
                });

                setTimeout(function(){
                    $('.chatmsg').css({
                        height: 'auto'
                    });
                },0)
            });

            channel.bind('logout', function () {
                $("#status").text('[离线]');
            });

            channel.bind('geton', function () {
                $("#status").text('');
            });


            pusher.connection.bind('state_change', function (states) {
                // states = {previous: 'oldState', current: 'newState'}
                if (states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed") {

                    pusher.unsubscribe("kefu" + value);
                    pusher.unsubscribe("all" + all);
                    $.cookie("hid", '');
                    wolive_connect();
                }

            });

            pusher.connection.bind('connected', function () {
                $(".chatmsg").remove();
                $.cookie('hid', '');
                getdata();
            });
        }
    </script>
</head>

<body>
<audio id="chat-message-audio">
    <source id="chat-message-audio-source" src="{$voice_address}" type="audio/mpeg" />
</audio>
    <header style="width: 100%;height: 50px;background: #7571f9;color: #fff;position:fixed;line-height: 50px;z-index: 99">
        <span class="newmsg hide"></span>
        <i class="layui-icon" style="position: absolute;left:10px;font-size: 20px;z-index: 999" onclick="back()">&#xe603;</i>
        <span id="customer"
          style="position:absolute;left:0;font-size: 18px;width: 100%;display: flex;justify-content: center;"><span class="user-name">{$data.visiter_name}</span><span
        id="status"></span></span>
        <img onclick="openGroup()" style="position:absolute;right:15px;width: 18px;height: 18px;top: 16px;" src="__image__/mobile/more.png" alt="">
</header>
        <section class="content" id="wrap" style="background-color: #f7f7f7">
            <div style="height: 55px;width: 100%;"></div>
            <ul class="conversation" id="log">
            </ul>
            <div id="bottom" style="height: 94px;width: 100%;"></div>
        </section>
        <footer style="position:fixed;bottom:0px;width: 100%;height: 94px;padding:0">
            <div class="tool_box">
                <div class="wl_faces_content">
                    <div class="wl_faces_main">
                    </div>
                </div>
            </div>
            <div class="foot_msg">
                <div class="footer">
                    <input type="text" id="text_all" placeholder="发消息..." class="layui-input" />
                    <button class="layui-btn layui-btn-normal send-btn" onclick="send()">发送
                    </button>
                </div>
                <div class="msg-toolbar">
                    <a id="face_icon" href="javascript:" onclick="faceon()"><img src="__image__/admin/B/smile.png" alt=""></a>
                    {if $atype == 'open'}
                    <a onclick="getaudio()"><img src="__image__/admin/B/smile.png" alt=""></a>
                    {/if}
                    <a id="images" href="javascript:">
                        <form id="picture" enctype="multipart/form-data">
                            <div class="layui-box input-but size">
                                <img src="__image__/admin/B/photo.png" alt="">
                                <input type="file" name="upload" class="fileinput" onchange="put()"/>
                            </div>
                        </form>
                    </a>
                    <a id="files" href="javascript:">
                        <form id="file" enctype="multipart/form-data">
                            <div class="layui-box input-but size">
                                <img src="__image__/admin/B/file.png" alt="">
                                <input type="file" name="folder" class="fileinput" onchange="putfile()"/>
                            </div>
                        </form>
                    </a>
                    <!-- 推送评价 -->
                    <a id="evaluate" href="javascript:" onclick="toEvaluate()"><img src="__image__/mobile/get-evaluate.png" alt=""></a>
                </div>
            </div>
        </footer>
        <div id='group' class="bg" v-if="openGroup">
            <div class="group">
                <div class="group-title">编辑分组</div>
                <div class="group-list">
                    <div class="group-item" v-for='item in list'>
                        <input class='checkbox' v-model="item.choose" :value="item.id" name='group' type='checkbox'>
                        <span class="group-name">{{item.group_name}}<span class="group-num">({{item.count}})</span></span>
                    </div>
                </div>
                <div class="group-btn">
                    <div @click="openGroup = false" class="group-cancel">取消</div>
                    <div @click="edit" class="group-submit">确定</div>
                </div>
            </div>
        </div>
        <script>
            function a() {
                var e = document.getElementById("chat-message-audio-source").src
                    , b = document.getElementById("chat-message-audio");
                b.src = "";
                var p = b.play();
                p && p.then(function(){}).catch(function(e){});
                b.src = e;
                $(document).unbind("click", a);
            }
            $(document).on("click", a);
        var group = new Vue({
            el: '#group',
            data() {
                let that = this;
                return {
                    list: [],
                    user: [],
                    vid: null,
                    openGroup: false,
                };
            },

            methods: {
                // 请求用户数据
                getList(page) {
                    let that = this;
                    $.ajax({
                        url: CGWL_ROOT_URL + '/admin/custom/group',
                        type: 'get',
                        data: {
                            page: page
                        },
                        success: function(res) {
                            if (res.code == 0) {
                                that.list = that.list.concat(res.data.data);
                                if (res.data.data.length == 10) {
                                    that.getList(page + 1);
                                }
                                for (let i = 0; i < that.user.length; i++) {
                                    for (let y = 0; y < that.list.length; y++) {
                                        if (that.list[y].group_name == that.user[i]) {
                                            that.list[y].choose = true;
                                        }
                                    }
                                }
                            }
                        }
                    });
                },
                getUser() {
                    let that = this;
                    $.ajax({
                        url: CGWL_ROOT_URL + '/admin/custom/search',
                        type: 'get',
                        data: {
                            group_id: 0,
                            page: 1,
                            nickname: '{$data.visiter_name}'
                        },
                        success: function(res) {
                            if (res.code == 0) {
                                that.user = res.data.data[0].group_name_array;
                                that.vid = [res.data.data[0].vid];
                                that.getList(1);
                            }
                        }
                    });
                },
                edit() {
                    let that = this;
                    let group_id = [];
                    for (let i = 0; i < that.list.length; i++) {
                        if (that.list[i].choose) {
                            group_id.push(that.list[i].id)
                        }
                    }
                    $.ajax({
                        url: CGWL_ROOT_URL + '/admin/custom/visitergroup',
                        type: 'post',
                        data: {
                            group_id: group_id,
                            vid: that.vid
                        },
                        success: function(res) {
                            if (res.code == 0) {
                                that.openGroup = false
                            }
                        }
                    });
                }
            }
        })
        </script>
        <script>
        $(function() {
            // let height = +document.documentElement.clientHeight;
            // window.scrollTop(height);
            // $('.content').css({
            //     height: height - 144
            // });
            group.getUser();
        })
        // 推送评价
        var toEvaluate = function() {
            $.ajax({
                url:CGWL_ROOT_URL + '/admin/set/pushComment',
                type:'post',
                data:{visiter_id:visiter_id},
                success:function(res){
                    if(res.code == 0){
                        var str = '';
                        str += "<div class='push-evaluation'>已推送评价</div>"
                        $(".conversation").append(str);
                        var div = document.getElementById("wrap");
                        div.scrollTop = div.scrollHeight;
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
        };

        var openGroup = function() {
            group.openGroup = true;
        };

        $(document).on('touchend', '.content', function() {
            $("#text_all").blur();
            $('.tool_box').css({
                display: 'none'
            });
        });

        var se = '{$se.nick_name}';

        var visiter_id = '{$data.visiter_id}';
        var img = '{$data.avatar}';

        var getaudio = function() {

            //音频先加载
            var audio_context;
            var recorder;
            var wavBlob;
            //创建音频
            try {
                // webkit shim
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
                window.URL = window.URL || window.webkitURL;

                audio_context = new AudioContext;

                if (!navigator.getUserMedia) {
                    console.log('语音创建失败');
                };
            } catch (e) {
                console.log(e);
                return;
            }
            navigator.getUserMedia({ audio: true }, function(stream) {
                var input = audio_context.createMediaStreamSource(stream);
                recorder = new Recorder(input);

                var falg = window.location.protocol;
                if (falg == 'https:') {
                    recorder && recorder.record();

                    //示范一个公告层
                    layui.use(['jquery', 'layer'], function() {
                        var layer = layui.layer;

                        layer.msg('录音中...', {
                            icon: 16,
                            shade: 0.01,
                            skin: 'layui-layer-lan',
                            time: 0 //20s后自动关闭
                                ,
                            btn: ['发送', '取消'],
                            yes: function(index, layero) {
                                //按钮【按钮一】的回调
                                recorder && recorder.stop();
                                recorder && recorder.exportWAV(function(blob) {
                                    wavBlob = blob;
                                    var fd = new FormData();
                                    var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
                                    fd.append('wavName', wavName);
                                    fd.append('file', wavBlob);

                                    var xhr = new XMLHttpRequest();
                                    xhr.onreadystatechange = function() {
                                        if (xhr.readyState == 4 && xhr.status == 200) {
                                            jsonObject = JSON.parse(xhr.responseText);

                                            voicemessage = '<div style="cursor:pointer;text-align:center;" onclick="getstate(this)" data="play"><audio src="' + jsonObject.data.src + '"></audio><i class="layui-icon" style="font-size:25px;">&#xe652;</i><p>音频消息</p></div>';

                                            var sid = $('#channel').text();
                                            var pic = $("#se_avatar").attr('src');
                                            var time;

                                            var sdata = $.cookie('cu_com');

                                            if (sdata) {
                                                var json = $.parseJSON(sdata);
                                                var img = json.avater;

                                            }

                                            if ($.cookie("time") == "") {
                                                var myDate = new Date();
                                                time = myDate.getHours() + ":" + myDate.getMinutes();
                                                var timestamp = Date.parse(new Date());
                                                $.cookie("time", timestamp / 1000);

                                            } else {

                                                var timestamp = Date.parse(new Date());

                                                var lasttime = $.cookie("time");
                                                if ((timestamp / 1000 - lasttime) > 30) {
                                                    var myDate = new Date(timestamp * 1000);
                                                    time = myDate.getHours() + ":" + myDate.getMinutes();
                                                } else {
                                                    time = "";
                                                }

                                                $.cookie("time", timestamp / 1000);
                                            }
                                            var str = '';
                                            str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                                            str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + pic + '" width="50px" height="50px"></div>';
                                            str += "<div class='outer-right'><div class='service'>";
                                            str += "<pre>" + voicemessage + "</pre>";
                                            str += "</div></div>";
                                            str += "</li>";

                                            $(".conversation").append(str);
                                            $("#text_all").empty();

                                            var div = document.getElementById("wrap");
                                            div.scrollTop = div.scrollHeight;
                                            
                                            $("img[src*='upload/images']").parent().parent('.customer').css({
                                                padding: '0',borderRadius: '0',maxHeight:'100px'
                                            });
                                            $("img[src*='upload/images']").parent().parent('.service').css({
                                                padding: '0',borderRadius: '0',maxHeight:'100px'
                                            });
                                            setTimeout(function(){
                                                $('.chatmsg').css({
                                                    height: 'auto'
                                                });
                                            },0)
                                            $.ajax({
                                                url: CGWL_ROOT_URL + "/admin/set/chats",
                                                type: "post",
                                                data: { visiter_id: visiter_id, content: voicemessage, avatar: img }
                                            });
                                        }
                                    };
                                    xhr.open('POST', '/admin/event/uploadVoice');
                                    xhr.send(fd);
                                });
                                recorder.clear();
                                layer.close(index);
                            },
                            btn2: function(index, layero) {
                                //按钮【按钮二】的回调
                                recorder && recorder.stop();
                                recorder.clear();
                                audio_context.close();
                                layer.close(index);
                            }
                        });

                    });
                } else {

                    layer.msg('音频输入只支持https协议！');
                }

            }, function(e) {
                layer.msg('音频输入只支持https协议！');
            });
        }

        var getstate = function(obj) {

            var c = obj.children[0];

            var state = $(obj).attr('data');

            if (state == 'play') {
                c.play();
                $(obj).attr('data', 'pause');
                $(obj).find('i').html("&#xe651;");

            } else if (state == 'pause') {
                c.pause();
                $(obj).attr('data', 'play');
                $(obj).find('i').html("&#xe652;");
            }

            c.addEventListener('ended', function() {
                $(obj).attr('data', 'play');
                $(obj).find('i').html("&#xe652;");

            }, false);
        }

        var back = function() {
            history.go(-1);
        }

        var init = function() {
            // 获取历史消息
            $.cookie("hid", '');
            getwatch(visiter_id);
            wolive_connect();
        }


        function getdata() {

            var showtime = "";
            var curentdata = new Date();
            var time = curentdata.toLocaleDateString();

            if ($.cookie("hid") != "") {
                var cid = $.cookie("hid");
            } else {
                var cid = "";

            }
            $.ajax({
                url: CGWL_ROOT_URL + "/weixin/chat/chatdata",
                type: "post",
                data: { visiter_id: visiter_id, hid: cid },
                success: function(res) {
                    //添加 最近的 聊天 记录
                    if (res.code == 0) {
                        var str = '';
                        if (!res.data.length) {
                            return;
                        }
                        $.each(res.data, function(k, v) {
                            if (getdata.puttime) {

                                if ((v.timestamp - getdata.puttime) > 60) {
                                    var myDate = new Date(v.timestamp * 1000);
                                    var puttime = myDate.toLocaleDateString();
                                    let year = myDate.getFullYear();
                                    let month = myDate.getMonth() + 1;
                                    let date = myDate.getDate();
                                    let hours = myDate.getHours();
                                    let minutes = myDate.getMinutes();
                                    if (hours < 10) {
                                        minutes = minutes.toString();
                                    }
                                    if (minutes < 10) {
                                        minutes = '0' + minutes.toString();
                                    }

                                    if (puttime == time) {
                                        showtime = hours + ":" + minutes;
                                    } else {
                                        showtime = year + "-" + month + "-" + date + " " + hours + ":" + minutes;
                                    }

                                } else {
                                    showtime = "";
                                }

                            } else {

                                var myDate = new Date(v.timestamp * 1000);
                                var puttime = myDate.toLocaleDateString();
                                let year = myDate.getFullYear();
                                let month = myDate.getMonth() + 1;
                                let date = myDate.getDate();
                                let hours = myDate.getHours();
                                let minutes = myDate.getMinutes();
                                if (hours < 10) {
                                    minutes = minutes.toString();
                                }
                                if (minutes < 10) {
                                    minutes = '0' + minutes.toString();
                                }

                                if (puttime == time) {
                                    showtime = hours + ":" + minutes;
                                } else {
                                    showtime = year + "-" + month + "-" + date + " " + hours + ":" + minutes;
                                }

                            }

                            getdata.puttime = v.timestamp;

                              if(v.content.indexOf('target="_blank') > -1) {
                                  v.content = v.content.replace(/alt="">/g,'alt=""></a>')
                              }
                            if (v.direction == 'to_service') {


                                str += '<li class="chatmsg"><div class="showtime">' + showtime + '</div><div class="" style="position: absolute;left:12px;">';
                                str += '<img class="my-circle  se_pic" src="' + v.avatar + '" width="40px" height="40px"></div>';
                                str += "<div class='outer-left'><div class='customer'>";
                                str += "<pre>" + v.content + "</pre>";
                                str += "</div></div>";
                                str += "</li>";

                            } else {

                                str += '<li class="chatmsg"><div class="showtime">' + showtime + '</div>';
                                str += '<div class="" style="position: absolute;top: 26px;right: 5px;"><img  class="my-circle cu_pic" src="' + v.avatar + '" width="40px" height="40px"></div>';
                                str += "<div class='outer-right'><div class='service'>";
                                str += "<pre>" + v.content + "</pre>";
                                str += "</div></div>";
                                str += "</li>";


                            }
                        });
                        var div = document.getElementById("wrap");
                        if ($.cookie("hid") == "") {
                            $(".conversation").append(str);
                            if (div) {
                                $("img").load(function(){
                                    div.scrollTop = div.scrollHeight;
                                });
                            }
                        } else {

                            $(".conversation").prepend(str);
                            if (res.length <= 2) {
                                $("#top_div").remove();
                                $(".conversation").prepend("<div id='top_div' class='showtime'>已没有数据</div>");
                                if (div) {
                                    div.scrollTop = 0;
                                }
                            } else {
                                if (div) {
                                    div.scrollTop = div.scrollHeight / 4.2;
                                }
                            }
                        }

                        $("img[src*='upload/images']").parent().parent('.customer').css({
                            padding: '0',borderRadius: '0',maxHeight:'100px'
                        });
                        $("img[src*='upload/images']").parent().parent('.service').css({
                            padding: '0',borderRadius: '0',maxHeight:'100px'
                        });
                        setTimeout(function(){
                            $('.chatmsg').css({
                                height: 'auto'
                            });
                        },0)
                        if (res.data.length > 2) {


                            $.cookie("hid", res.data[0]['cid']);
                            $(".chatmsg_notice").remove();
                        }
                    }
                }
            });
        }

        window.onload = init();


        var e = {
            '羊驼': 'emo_01',
            '神马': 'emo_02',
            '浮云': 'emo_03',
            '给力': 'emo_04',
            '围观': 'emo_05',
            '威武': 'emo_06',
            '熊猫': 'emo_07',
            '兔子': 'emo_08',
            '奥特曼': 'emo_09',
            '囧': 'emo_10',
            '互粉': 'emo_11',
            '礼物': 'emo_12',
            '微笑': 'emo_13',
            '嘻嘻': 'emo_14',
            '哈哈': 'emo_15',
            '可爱': 'emo_16',
            '可怜': 'emo_17',
            '抠鼻': 'emo_18',
            '吃惊': 'emo_19',
            '害羞': 'emo_20',
            '调皮': 'emo_21',
            '闭嘴': 'emo_22',
            '鄙视': 'emo_23',
            '爱你': 'emo_24',
            '流泪': 'emo_25',
            '偷笑': 'emo_26',
            '亲亲': 'emo_27',
            '生病': 'emo_28',
            '太开心': 'emo_29',
            '白眼': 'emo_30',
            '右哼哼': 'emo_31',
            '左哼哼': 'emo_32',
            '嘘': 'emo_33',
            '衰': 'emo_34',
            '委屈': 'emo_35',
            '呕吐': 'emo_36',
            '打哈欠': 'emo_37',
            '抱抱': 'emo_38',
            '怒': 'emo_39',
            '问号': 'emo_40',
            '馋': 'emo_41',
            '拜拜': 'emo_42',
            '思考': 'emo_43',
            '汗': 'emo_44',
            '打呼': 'emo_45',
            '睡': 'emo_46',
            '钱': 'emo_47',
            '失望': 'emo_48',
            '酷': 'emo_49',
            '好色': 'emo_50',
            '生气': 'emo_51',
            '鼓掌': 'emo_52',
            '晕': 'emo_53',
            '悲伤': 'emo_54',
            '抓狂': 'emo_55',
            '黑线': 'emo_56',
            '阴险': 'emo_57',
            '怒骂': 'emo_58',
            '心': 'emo_59',
            '伤心': 'emo_60'
        };

        var faceon = function() {
            $(".wl_faces_main").empty();
            var str = ""
            str += '<ul>';
            str += '<li><img title="羊驼" src="/upload/emoji/emo_01.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="神马" src="/upload/emoji/emo_02.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="浮云" src="/upload/emoji/emo_03.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="给力" src="/upload/emoji/emo_04.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="围观" src="/upload/emoji/emo_05.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="威武" src="/upload/emoji/emo_06.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="熊猫" src="/upload/emoji/emo_07.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="兔子" src="/upload/emoji/emo_08.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="奥特曼" src="/upload/emoji/emo_09.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="囧" src="/upload/emoji/emo_10.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="互粉" src="/upload/emoji/emo_11.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="礼物" src="/upload/emoji/emo_12.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="微笑" src="/upload/emoji/emo_13.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="嘻嘻" src="/upload/emoji/emo_14.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="哈哈" src="/upload/emoji/emo_15.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="可爱" src="/upload/emoji/emo_16.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="可怜" src="/upload/emoji/emo_17.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="抠鼻" src="/upload/emoji/emo_18.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="吃惊" src="/upload/emoji/emo_19.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="害羞" src="/upload/emoji/emo_20.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="调皮" src="/upload/emoji/emo_21.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="闭嘴" src="/upload/emoji/emo_22.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="鄙视" src="/upload/emoji/emo_23.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="爱你" src="/upload/emoji/emo_24.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="流泪" src="/upload/emoji/emo_25.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="偷笑" src="/upload/emoji/emo_26.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="亲亲"  src="/upload/emoji/emo_27.gif"  onclick="emoj(this)"/></li>';
            str += '<li><img title="生病" src="/upload/emoji/emo_28.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="太开心" src="/upload/emoji/emo_29.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="白眼" src="/upload/emoji/emo_30.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="右哼哼" src="/upload/emoji/emo_31.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="左哼哼" src="/upload/emoji/emo_32.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="嘘" src="/upload/emoji/emo_33.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="衰" src="/upload/emoji/emo_34.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="委屈" src="/upload/emoji/emo_35.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="呕吐" src="/upload/emoji/emo_36.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="打哈欠" src="/upload/emoji/emo_37.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="抱抱" src="/upload/emoji/emo_38.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="怒" src="/upload/emoji/emo_39.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="问号" src="/upload/emoji/emo_40.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="馋" src="/upload/emoji/emo_41.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="拜拜" src="/upload/emoji/emo_42.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="思考" src="/upload/emoji/emo_43.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="汗" src="/upload/emoji/emo_44.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="打呼" src="/upload/emoji/emo_45.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="睡" src="/upload/emoji/emo_46.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="钱" src="/upload/emoji/emo_47.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="失望" src="/upload/emoji/emo_48.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="酷" src="/upload/emoji/emo_49.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="好色" src="/upload/emoji/emo_50.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="生气" src="/upload/emoji/emo_51.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="鼓掌" src="/upload/emoji/emo_52.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="晕" src="/upload/emoji/emo_53.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="悲伤" src="/upload/emoji/emo_54.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="抓狂" src="/upload/emoji/emo_55.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="黑线" src="/upload/emoji/emo_56.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="阴险" src="/upload/emoji/emo_57.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="怒骂" src="/upload/emoji/emo_58.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="心" src="/upload/emoji/emo_59.gif" onclick="emoj(this)"/></li>';
            str += '<li><img title="伤心" src="/upload/emoji/emo_60.gif" onclick="emoj(this)"/></li>';
            str += "</ul>";
            $(".wl_faces_main").append(str);
            $(".tool_box").toggle();
            var e = window.event || arguments.callee.caller.arguments[0];
            e.stopPropagation();
        }

        $('body').click(function() {
            $(".tool_box").hide();
        });

        var emoj = function(obj) {
            var a = $(obj).attr("title");
            var str = $("#text_all").val();
            var reg = new RegExp('<', "g")
            str = str.replace(reg, '&lt;');

            var reg2 = new RegExp('>', "g")

            str = str.replace(reg2, '&gt;');
            var b = "";
            b += str + " face[" + a + "]";
            $("#text_all").val(b);
            $(".tool_box").hide()

        }

        // 图片上传
        function put() {

            var value = $('input[name="upload"]').val();
            var index1 = value.lastIndexOf(".");
            var index2 = value.length;
            var suffix = value.substring(index1 + 1, index2);
            var debugs = suffix.toLowerCase();

            if (debugs == "jpg" || debugs == "gif" || debugs == "png" || debugs == "jpeg") {

                $("#picture").ajaxSubmit({
                    url: CGWL_ROOT_URL + '/admin/set/upload',
                    type: "post",
                    dataType: 'json',
                    success: function(res) {
                        if (res.code == 0) {

                            var msg = '<img style="height:100px" src="' + res.data + '" onclick="getbig(this)" >';

                            var se = $("#chatmsg_submit").attr('name');
                            var customer = $("#customer").text();
                            var time;

                            if ($.cookie("time") == "") {
                                var myDate = new Date();
                                time = myDate.getHours() + ":" + myDate.getMinutes();
                                var timestamp = Date.parse(new Date());
                                $.cookie("time", timestamp / 1000);

                            } else {

                                var timestamp = Date.parse(new Date());

                                var lasttime = $.cookie("time");
                                if ((timestamp / 1000 - lasttime) > 30) {
                                    var myDate = new Date(timestamp);
                                    time = myDate.getHours() + ":" + myDate.getMinutes();
                                } else {
                                    time = "";
                                }

                                $.cookie("time", timestamp / 1000);

                            }
                            var str = '';
                            str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                            str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + imghead + '" width="50px" height="50px"></div>';
                            str += "<div class='outer-right'><div class='service'>";
                            str += "<pre>" + msg + "</pre>";
                            str += "</div></div>";
                            str += "</li>";

                            $(".conversation").append(str);
                            var div = document.getElementById("wrap");
                            div.scrollTop = div.scrollHeight;
                            $("img[src*='upload/images']").parent().parent('.customer').css({
                                padding: '0',borderRadius: '0',maxHeight:'100px'
                            });
                            $("img[src*='upload/images']").parent().parent('.service').css({
                                padding: '0',borderRadius: '0',maxHeight:'100px'
                            });

                            setTimeout(function(){
                                $('.chatmsg').css({
                                    height: 'auto'
                                });
                            },0)
                            $.ajax({
                                url: CGWL_ROOT_URL + "/admin/set/chats",
                                type: "post",
                                data: { visiter_id: visiter_id, content: msg, avatar: img },
                                success: function(res) {
                                    if (res.code != 0) {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    }
                });

            } else {

                layer.msg("请选择图片", { icon: 2 });
            }
        }


        // 文件上传
        function putfile() {

            var value = $('input[name="folder"]').val();
            var sarr = value.split('\\');
            var name = sarr[sarr.length - 1];
            var arr = value.split(".");

            if (arr[1] == "js" || arr[1] == "css" || arr[1] == "html" || arr[1] == "php") {
                layer.msg("不支持该格式的文件", { icon: 2 });

            } else {

                var myDate = new Date();
                var time = myDate.getHours() + ":" + myDate.getMinutes();

                $("#file").ajaxSubmit({
                    url: CGWL_ROOT_URL + '/admin/set/uploadfile',
                    type: 'post',
                    datatype: 'json',
                    success: function(res) {
                        if (res.code == 0) {
                            var str = '';
                            str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                            str += '<div class="" style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle cu_pic" src="' + imghead + '" width="40px" height="40px"></div>';
                            str += "<div class='outer-right'><div class='service'>";
                            str += "<pre><div style='height:90px'>";
                            str += "<a href='" + res.data + "' style='display: inline-block;text-align: center;min-width: 70px;text-decoration: none;' download='" + name + "'><i class='layui-icon' style='font-size: 60px;'>&#xe61e;</i><br>" + name + "</a>";
                            str += "</div></pre>";
                            str += "</div></div>";
                            str += "</li>";

                            $(".conversation").append(str);
                            var div = document.getElementById("wrap");
                            div.scrollTop = div.scrollHeight;
                            $("img[src*='upload/images']").parent().parent('.customer').css({
                                padding: '0',borderRadius: '0',maxHeight:'100px'
                            });
                            $("img[src*='upload/images']").parent().parent('.service').css({
                                padding: '0',borderRadius: '0',maxHeight:'100px'
                            });

                            setTimeout(function(){
                                $('.chatmsg').css({
                                    height: 'auto'
                                });
                            },0)
                            var msg = "<div><a href='" + res.data + "' style='display: inline-block;text-align: center;min-width: 70px;text-decoration: none;' download='" + name + "'><i class='layui-icon' style='font-size: 60px;'>&#xe61e;</i><br>" + name + "</a></div>";

                            var sid = $('#channel').text();
                            var se = $("#chatmsg_submit").attr('name');
                            var customer = $("#customer").text();
                            $.ajax({
                                url: CGWL_ROOT_URL + "/admin/set/chats",
                                type: "post",
                                data: { visiter_id: visiter_id, content: msg, avatar: img }
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }

                    }
                });

            }
        }


        //发送消息
        var send = function() {
            //获取 游客id
            var msg = $("#text_all").val();


            var reg = new RegExp('<', "g")
            msg = msg.replace(reg, '&lt;');

            var reg2 = new RegExp('>', "g")
            msg = msg.replace(reg2, '&gt;');

            if (msg.indexOf("face[") != -1) {

                msg = msg.replace(/face\[([^\s\[\]]+?)\]/g, function(i) {
                    var a = i.replace(/^face/g, "");
                    a = a.replace('[', '');
                    a = a.replace(']', '');
                    return '<img src="/upload/emoji/' + e[a] + '.gif"/>'
                });

            }

            if (msg == "") {
                layer.msg('请输入信息');
            } else {

                var se = $("#chatmsg_submit").attr('name');
                var customer = $("#customer").text();
                var time;

                if ($.cookie("time") == "") {
                    var myDate = new Date(timestamp);
                    let year = myDate.getFullYear();
                    let month = myDate.getMonth() + 1;
                    let date = myDate.getDate();
                    let hours = myDate.getHours();
                    let minutes = myDate.getMinutes();
                    if (hours < 10) {
                        minutes = '0' + minutes.toString();
                    }
                    if (minutes < 10) {
                        minutes = '0' + minutes.toString();
                    }
                    time = year + "-" + month + "-" + date + " " + hours + ":" + minutes;
                    var timestamp = Date.parse(new Date());
                    $.cookie("time", timestamp / 1000);

                } else {

                    var timestamp = Date.parse(new Date());

                    var lasttime = $.cookie("time");
                    if ((timestamp / 1000 - lasttime) > 30) {
                        var myDate = new Date(timestamp);
                        let hours = myDate.getHours();
                        let minutes = myDate.getMinutes();
                        if (hours < 10) {
                            minutes = '0' + minutes.toString();
                        }
                        if (minutes < 10) {
                            minutes = '0' + minutes.toString();
                        }
                        time = hours + ":" + minutes;
                    } else {
                        time = "";
                    }

                    $.cookie("time", timestamp / 1000);

                }

                var str = '';
                str += '<li class="chatmsg"><div class="showtime">' + time + '</div>';
                str += '<div style="position: absolute;top: 26px;right: 2px;"><img  class="my-circle se_pic" src="' + imghead + '" width="40px" height="40px"></div>';
                str += "<div class='outer-right'><div class='service'>";
                str += "<pre>" + msg + "</pre>";
                str += "</div></div>";
                str += "</li>";

                $(".conversation").append(str);
                $("#text_all").val('');


                var div = document.getElementById("wrap");
                $("img").load(function(){
                    div.scrollTop = div.scrollHeight;
                });
                $("img[src*='upload/images']").parent().parent('.customer').css({
                    padding: '0',borderRadius: '0',maxHeight:'100px'
                });
                $("img[src*='upload/images']").parent().parent('.service').css({
                    padding: '0',borderRadius: '0',maxHeight:'100px'
                });

                setTimeout(function(){
                    $('.chatmsg').css({
                        height: 'auto'
                    });
                },0)
                $.ajax({
                    url: CGWL_ROOT_URL + "/admin/set/chats",
                    type: "post",
                    data: { visiter_id: visiter_id, content: msg, avatar: img }
                });
            }
        }

        document.getElementById("wrap").onscroll = function() {
            var t = document.getElementById("wrap").scrollTop;
            if (t == 0) {
                if ($.cookie("hid") != "") {
                    console.log(t);
                    getdata();
                }
            }
        }

        function getbig(obj) {
            var text = $(obj).attr('src');
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                area: '70%',
                shadeClose: true,
                content: "<img src='" + text + "' width='100%' height='100%'>"
            });
        }

        var text = document.getElementById('text_all');
        // 获取焦点，拉到底部
        text.onfocus = function() {
            $(".tool_box").hide();
            let height = +document.documentElement.clientHeight;
            setTimeout(function(){
                $('html ,body').animate({scrollTop: height}, 0);
            },200)
        }
        // 失去焦点，拉到顶部
        text.onblur = function() {
            setTimeout(function() {
                $('html ,body').animate({ scrollTop: 0 }, 0);
            }, 0)
        }
        </script>
</body>

</html>